<template>
  <div id="questionListView" class="g-container">
    <a-form :model="pagination" layout="inline">
      <a-form-item field="title" label="标题" style="min-width: 280px">
        <a-input v-model="pagination.title" placeholder="请输入标题"/>
      </a-form-item>
      <a-form-item field="tags" label="标签" style="min-width: 280px">
        <a-input-tag v-model="pagination.tags" placeholder="请输入标签"/>
      </a-form-item>
      <a-form-item>
        <a-space wrap>
          <a-button type="primary" @click="handleSearch">搜索</a-button>
          <a-button type="primary" status="warning" @click="handleReset"
          >重置
          </a-button>
        </a-space>
      </a-form-item>
    </a-form>
    <a-table
        :data="data"
        :pagination="{
        total: pagination.total,
        pageNumber: pagination.pageNumber,
        pageSize: pagination.pageSize,
      }"
        @page-change="changePage"
        column-resizable
        :columns="columns"
        style="margin-bottom: 20px"
    >
      <template #tags="{ record }">
        <a-space wrap>
          <a-tag v-for="tag in record.tags" :key="tag" color="arcoblue"
          >{{ tag }}
          </a-tag>
        </a-space>
      </template>
      <template #difficulty="{ record }">
        <a-tag v-if="record.difficulty == ProblemDifficultyEnum.EASY.code" color="#ffb400">
          {{ ProblemDifficultyEnum.EASY.text }}
        </a-tag>
        <a-tag v-else-if="record.difficulty == ProblemDifficultyEnum.MEDIUM.code" color="#168cff">
          {{ ProblemDifficultyEnum.MEDIUM.text }}
        </a-tag>
        <a-tag v-else color="#ff5722">
          {{ ProblemDifficultyEnum.HARD.text }}
        </a-tag>
      </template>
      <template #acRatio="{ record }">
        {{
          `${record.submissionCount ? (record.acceptedCount / record.submissionCount * 100).toFixed(2) : 0} % (${
              record.acceptedCount
          }/${record.submissionCount})`
        }}
      </template>
      <template #createTime="{ record }">
        {{ moment(record.createTime).format("YYYY-MM-DD") }}
      </template>
      <template #optional="{ record }">
        <a-link status="danger" @click.prevent="toDoQuestion(record.id)">go!</a-link>
      </template>
    </a-table>
  </div>
</template>

<script lang="ts" setup>
import {onMounted, ref} from "vue";
import {Message} from "@arco-design/web-vue";
import router from "/src/router";
import moment from "moment";
import {ProblemControllerService} from "../../apis";
import {ProblemDifficultyEnum} from "/src/common/enums/problem"

const columns = [
  {
    title: "题号",
    dataIndex: "id",
  },
  {
    title: "标题",
    dataIndex: "title",
  },
  {
    title: "难度",
    slotName: "difficulty",
  },
  {
    title: "标签",
    slotName: "tags",
  },
  {
    title: "通过率（AC/SUBMIT）",
    slotName: "acRatio",
  },
  {
    title: "创建时间",
    slotName: "createTime",
  },
  {
    title: "",
    slotName: "optional",
  },
];
const data = ref([]);

const pagination = ref({
  title: "",
  tags: [],
  total: 20,
  pageSize: 10,
  pageNumber: 1,
});

const toDoQuestion = (id) => {
  router.push({
    name: "QuestionDo",
    params: {
      id: id,
    },
  });
};
const changePage = (pageNum) => {
  pagination.value.pageNumber = pageNum;
  getData();
};
const handleSearch = () => {
  pagination.value.pageNumber = 1;
  getData();
};
const handleReset = () => {
  pagination.value.pageNumber = 1;
  pagination.value.tags = [];
  pagination.value.title = "";
  getData();
};

const getData = async () => {
  const res = await ProblemControllerService.list(
      pagination.value
  );
  if (res.code === 200) {
    data.value = res.data.records;
    pagination.value.total = Number(res.data.total);

    data.value.forEach(x => {
      x.tags = JSON.parse(x.tags);
    })
  } else {
    Message.error("获取题目失败" + res.msg);
  }
};

onMounted(() => {
  getData();
});
</script>

<style scoped>

</style>
